<template>
  <div>
    <router-view></router-view>
    <ButtomNav v-if="state.show"></ButtomNav>
    <VoiceSwitchBall v-draggable></VoiceSwitchBall>
  </div>
</template>

<script setup>
import ButtomNav from './components/ButtomNav.vue';
import VoiceSwitchBall from './components/VoiceSwitchBall.vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const state = reactive({
  menu: ['/ai-scan', '/app-service', '/user-center', '/user-home'],
  show: false,
});

// 是否显示底部导航栏，取决于当前路由是否在菜单中
const router = useRouter();
router.beforeEach((to, from, next) => {
  state.show = state.menu.includes(to.path)
  next();
})

</script>

<style lang="less" scoped></style>